<template>
  <div class="recordList">
    <div class="recordList_item" v-for="item in list" :key="item.id">
      <div class="recordList_item_date">{{ item.date }}</div>
      <div class="recordList_item_machine">{{ item.medicine }}</div>
      <div class="recordList_item_recorder">{{ item.record }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "recordList",
  props: {
    list: {
      required: true,
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scope>
.recordList {
  &_item {
    margin: 20px 0;
    display: flex;
    font-size: 15px;

    &_date {
      width: 45%;
      display: flex;
      text-align: left;
      align-items: center;
    }
    &_machine {
      width: 30%;
      display: flex;
      text-align: left;
      align-items: center;
      text-indent: 5px;
    }
    &_recorder {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
